<template>
  <div class="card-type-two image-view jianjian" :class="[imageStyle]" ref="container">
    <ul :style="themStyle" class="type-two" v-for="(d, i) in dataList" :key="i">
      <li
        v-for="(item, index) in d.slice(0,2)"
        :key="index"
        class="type-two-li"
        :title="item.subject"
        :style="liStyle"
      >
      <div>
          <a :href="item.src" class="title" target="_blank">{{ item.subject }}</a>
        </div>
        <a :href="`${newsBasePath}${item.link}`" target="_blank">
          <ShowImg :item="item" />
        </a>
       
      </li>
    </ul>
  </div>
</template>

<script>
  import { image } from '@/mixins';
  import { methods } from '@/utils';
  export default {
    name: 'TypeTwo',
    mixins: [image],
    props: {
      dataList: { type: Array },
      options: { type: Object },
      isOne: { type: Boolean, default: false }
    },
    data() {
      return {
        imgBasePath: imgBasePath,
        newsBasePath: `${_basePath}/`,
        liStyle: {}
      };
    },
    computed: {
      themStyle() {
        return {
          background: this.options.backgroundColor
        };
      }
    },
    mounted() {
      if (!this.isOne) {
        //修正间距
        this.liStyle = {
          width: `${
            Math.ceil(
              this.$refs.container.clientWidth / Math.max(...this.dataList.map((d) => d.length))
            ) - 23
          }px`
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
.image-view.cover a > img{
  height: 100%;
}
  .card-type-two {
    > ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: flex;
      flex-wrap: nowrap;

      > li {
        vertical-align: top;
      }
    }

    .title {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    > .type-two {
      > li {
        position: relative;
        display: inline-block;
        width: 47% !important;
        height: 160px !important;      
        padding: 10px 20px;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        box-sizing: border-box;
        > a {
          display: block;
          width: 100%;
          height:73%;
          // line-height: 150px;
        }

        > div {
          // position: absolute;
          bottom: 0%;
          width: 100%;
          height: 30px;
          line-height: 30px;
          margin-bottom: 6px;
          color: #000;
          // background: rgba(0, 0, 0, 0.5);
          // border-radius: 0 0 5px 5px;
          filter: progid:dximagetransform.microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);

          > a {
            margin: 0 10px;
          }
        }
      }

      > .type-two-li {
        // width: 250px;
        height: 150px;
        margin: 10px;
        // margin-right: 20px;
      }
    }
  }
</style>
